<template>
	<view class="warp">
		<view class="card_box">
			<view class="card">
				
				<view class="info">
					<view class="left">
						<image style="width: 88rpx; height: 88rpx;border-radius: 50%;" :src="customerinfo.avatar"></image>
					</view>
					<view class="right">
						<view class="name">
							{{customerinfo.customerName}}
						</view>
						<view class="status">
							<view class="left_status">
							<!-- 	<span style="margin-right: 5rpx;">意向度:</span> -->
								<span v-if="customerinfo.cusCustomerIntention=='0'">高</span>
								<span v-if="customerinfo.cusCustomerIntention=='1'">中</span>
								<span v-if="customerinfo.cusCustomerIntention=='2'">低</span>
								<span v-if="customerinfo.cusCustomerIntention=='3'">无</span>
							</view>
							<view class="right_status">
								<span v-if="customerinfo.followList.length!=0">已跟进</span>
								<span v-else>未跟进</span>
							</view>
						</view>
						<view class="phone" >
							<uni-icons type="phone" size="30rpx"></uni-icons>
							<!-- <span style="margin:0 6rpx">{{customerinfo.createBy}}</span> -->
							<span>{{customerinfo.phoneNum}}</span>
							
							<!-- <span v-if="customerinfo.phoneNum">{{customerinfo.phoneNum}}</span>
						     <span v-if="customerinfo.phoneAddress">{{customerinfo.phoneAddress}}</span> -->
						</view>
						<view class="address">
							<uni-icons type="location" size="30rpx"></uni-icons>
						   <span style="margin:0 6rpx">{{customerinfo.address}}</span>
						</view>
						<view class="source">
							<view class="left_s">
								<span>来源:</span>
								<span>小程序</span>
							</view>
						</view>
						
					</view>
				</view>
				<view class="bottom">
					<view class="b_list">
						<view class="b_item" v-if="customerinfo.followList">
							<view class="b_top">
								{{customerinfo.followList.length}}
							</view>
							<view class="b_bottom">
								跟进次数
							</view>
						</view>
						<view class="b_item" v-if="customerinfo.browList">
							<view class="b_top">
								{{customerinfo.browList.length}}
							</view>
							<view class="b_bottom">
								浏览次数
							</view>
						</view>
						<view class="b_item">
							<view class="b_top">
								{{orderList.length}}
							</view>
							<view class="b_bottom">
								订单数
							</view>
						</view>
						<view class="b_item">
							<view class="b_top">
								0
							</view>
							<view class="b_bottom">
								成交金额
							</view>
						</view>
						
					</view>
					
				</view>
			</view>
		</view>
	    <view class="tabs">
	    	<view class="tab_list">
	    		<view @click="changetab(index)" :class="tabnum==index?'tab_active':'tab_item'" v-for="(item,index) in tablist" :key="index">
	    			{{item.name}}
	    		</view>
	    	</view>
	    </view>
		<view class="tab_value">
			<view class="thread" v-if="tabnum==0">
				<view class="thread_list" v-if="customerinfo.browList.length!=0">
					<view class="thread_item" v-for="(item,index) in customerinfo.browList" :key="index">
						<view class="t_lft">
							<view class="scri">
								
							</view>
							<view class="line">
								
							</view>
						</view>
						<view class="t_rightg">
							<view class="time">
								{{item.browCreatedTime}}
							</view>
							<view class="value">
								<span style="font-size: 28rpx;">通过</span>
								<span style="font-size: 30rpx; color: #97672b;margin: 0 8rpx;font-weight: 550;">{{item.scoreUsername}}</span>
								<span>浏览了</span>
								<span style="font-size: 30rpx; color: #97672b; font-weight: 550;margin-right: 10rpx;margin-left: 10rpx;">{{item.browGoods}}</span>
								<span>{{item.browTime}} s</span>
								<view v-if="item.browTime*1>=20" style="font-size: 24rpx; color: #97672b;margin-top: 10rpx;border: 2rpx solid #6a655f;width: 120rpx;padding: 5rpx 10rpx;" >有效浏览</view>
							   <view v-if="item.browTime*1>=10 && item.browTime*1<20" style="font-size: 24rpx; color: #97672b;margin-top: 10rpx;border: 2rpx solid #6a655f;width: 120rpx;padding: 5rpx 10rpx;" >意向浏览</view>
								<view v-if="item.browTime*1<=10"  style="font-size: 24rpx; color: #97672b;margin-top: 10rpx;border: 2rpx solid #6a655f;width: 120rpx;padding: 5rpx 10rpx;" >无效浏览</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="follow"  v-if="tabnum==1">
				
				<view class="follow_list" v-if="customerinfo.followList">
					<view class="follow_item" v-for="(item,index) in customerinfo.followList">
						<view class="time comm">
							<span style="font-size: 28rpx;color: #6a655f;margin-right: 8rpx;">创建时间:</span>
							<span>{{item.followCreateTime}}</span>
						</view>
						<view class="follower comm">
							<span style="font-size: 28rpx;color: #6a655f;margin-right: 8rpx;">跟进人:</span>
							<span>{{item.followCreateBy}}</span>
						</view>
						<view class="follow_stage comm">
							<span style="font-size: 28rpx;color: #6a655f;margin-right: 8rpx;">跟进阶段:</span>
							<span v-if="item.followStage=='0'">初步沟通</span>
							<span v-if="item.followStage=='1'">确定意向</span>
							<span v-if="item.followStage=='2'">等待付款</span>
						</view>
						<view class="intention comm">
							<span style="font-size: 28rpx;color: #6a655f;margin-right: 8rpx;">意向度:</span>
							<span v-if="item.customerIntention=='0'">高</span>
							<span v-if="item.customerIntention=='1'">中</span>
							<span v-if="item.customerIntention=='2'">低</span>
							<span v-if="item.customerIntention=='3'">无</span>
						</view>
						<view class="isbargain comm">
							<span style="font-size: 28rpx;color: #6a655f;margin-right: 8rpx;">是否成交:</span>
							<span v-if="item.dealOrNot=='0'">是</span>
							<span v-if="item.dealOrNot=='1'">否</span>
							
							
						</view>
						<view class="remark comm">
							<span style="font-size: 28rpx;color: #6a655f;margin-right: 8rpx;">跟进备注:</span>
						    <span>{{item.followRemark}}</span>
						</view>
						<view class="icon" @click="deletefn(item)">
							<uni-icons type="trash-filled" size="50rpx"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view class="order" v-if="tabnum==3">
				 
					<view v-for="(item,index) in orderList" :key="index"
						class="order-item flex_column_start_start" @click.stop="goOrderDetail(item.orderSn,item)">
						<view class="i-top">
							<!-- <text class="order_sn">订单编号：{{item.orderSn}}</text> -->
							<view class="store_name" @click.stop="goShopHome(item.storeId)">
								<image class="store_logo" :src="imgUrl+'goods_detail/store_logo.png'">
								</image>
								<text class="store_name_text">{{item.storeName}}</text>
								<image class="store_logo_right"
									:src="(item.storeId==0?'':imgUrl+'order/store_right.png')"></image>
								<!-- <text class="iconfont iconziyuan11"></text> -->
							</view>
							<text class="state" :style="{color: item.stateTipColor}">{{item.orderStateValue}}</text>
						</view>
						<!-- 循环更改 -->
						<view v-if="item.orderProductListVOList" class="goods-box flex_row_between_center"
							v-for="(goodsItem, goodsIndex) in item.orderProductListVOList" :key="goodsIndex">
							<view class="left flex_row_start_start">
				
								<view class="goods-img"
									:style="{backgroundImage: 'url('+goodsItem.productImage+')'}"></view>
								<view class='goods_info flex_column_between_start'>
									<view class='flex_column_start_start'>
										<text class="goods_name">{{goodsItem.goodsName}}</text>
										<text class="spec_info"
											v-if="goodsItem.specValues">{{goodsItem.specValues}}</text>
									</view>
				
									<block v-if="goodsItem.isGift==0">
										<view class="label_con flex_row_start_start" v-if="item.orderType==103">
											<view class="act_label preSale">{{$L('预售')}}</view>
											<view v-if="item.orderType==103&&item.deliverTime"
												class="presale_deliver_time">{{item.deliverTime}} {{$L('开始发货')}}
											</view>
										</view>
										<view class="label_con flex_row_start_start" v-if="item.orderType==102">
											<view class="act_label pinGroup">{{$L('拼团')}}</view>
											<view v-if="item.orderType==103&&item.deliverTime"
												class="presale_deliver_time">{{item.deliverTime}} {{$L('开始发货')}}
											</view>
										</view>
										<view class="label_con flex_row_start_start" v-if="item.orderType==105">
											<view class="act_label ladder">{{$L('阶梯团')}}</view>
										</view>
										<view class="label_con flex_row_start_start" v-if="item.orderType==104">
											<view class="act_label seckill">{{$L('秒杀')}}</view>
										</view>
									</block>
								</view>
							</view>
							<view class="right flex_column_center_end">
								<block v-if="goodsItem.isGift==0">
									<view class="price_info flex_row_end_end">
										<text class="unit">{{$L('￥')}}</text>
										<text
											class="price_int">{{$getPartNumber(goodsItem.productShowPrice,'int')}}</text>
										<text
											class="price_decimal">{{$getPartNumber(goodsItem.productShowPrice,'decimal')}}</text>
									</view>
									<text class="goods_num">*{{goodsItem.productNum}}</text>
								</block>
								<block v-else>
									<!-- <text class="price_decimal">赠品</text> -->
									<text class="goods_num_give">{{$L('赠品')}}</text>
									<text class="goods_num">*{{goodsItem.productNum}}</text>
								</block>
							</view>
							<view class="goods_return_status" v-if="goodsItem.afsStateValue">
								{{goodsItem.afsStateValue}}
							</view>
						</view>
						<view class="price-box">
							{{$L('共')}}{{item.goodsNum}}{{$L('件商品')}}
							<text class="order_mount">{{$L('合计')}} :</text>
							<view class="total_price flex_row_end_end">
								<text class="unit">{{$L('¥')}}</text>
								<text class="price_int">{{$getPartNumber(item.totalMoney,'int')}}</text>
								<text class="price_decimal">{{$getPartNumber(item.totalMoney,'decimal')}}</text>
							</view>
						</view>
						<view v-if="((item.orderState == 10||item.orderState == 20)&&item.isVirtualGoods==1&&!item.isUpdateAddress)
							|| (item.orderState == 40 && item.evaluateState==3) || item.orderState == 31" style="height: 30rpx;">
						</view>
						<view class="action-box">
							<!-- 待付款、待发货订单可以修改地址 -->
							<button v-if="(item.orderState == 10||item.orderState == 20)&&item.isVirtualGoods==1"
								class="action-btn flex_row_center_center"
								@click.stop="editAddress(item)">{{$L('修改地址')}}</button>
							<!-- 待收货、已完成订单可以查看物流 -->
							<button v-if="(item.orderState == 30||item.orderState == 40||item.orderState == 31)&&item.isVirtualGoods==1"
								class="action-btn flex_row_center_center"
								@click.stop="lookLogistics(item.orderSn)">{{$L('查看物流')}}</button>
							<!-- 待收货订单可以确认收货 -->
							<!-- <button v-if="item.orderState == 30&&item.lockState==0" class="action-btn recom flex_row_center_center"
								@click.stop="confirmReceipt('open',item.orderSn)">{{$L('确认收货')}}</button> -->
							<!-- 待评价订单可以评价 -->
							<!-- <button v-if="item.orderState == 40 && item.evaluateState!=3"
								class="action-btn recom flex_row_center_center"
								@click.stop="remainEvaluated(item.orderSn)">{{$L('评价')}}</button> -->
							<!-- 待付款订单可以取消订单 -->
							<!-- <button v-if="item.orderState == 10" class="action-btn flex_row_center_center"
								@click.stop="cancelPopup(item)">{{$L('取消订单')}}</button> -->
							<!-- 待付款订单可以立即支付 -->
							<!-- <button
								v-if="item.orderState == 10&&!((item.orderType==105&&item.orderSubState==102&&item.depositRemainTime>0)||(item.orderType==103&&item.orderSubState==102&&item.remainEndTime>0))"
								class="action-btn recom flex_row_center_center"
								@click.stop="goPay(item)">{{$L('立即支付')}}</button> -->
							<!-- 已取消、全部评价完成订单可以删除订单 -->
							<!-- <button
								v-if='item.orderState==0||(item.orderState==40&&item.evaluateState==3)||item.orderState==50'
								class="action-btn flex_row_center_center"
								@click.stop="delOrder(item.orderSn)">{{$L('删除订单')}}</button> -->
						</view>
					</view>
				 
			</view>
			<view class="info" v-if="tabnum==4">
			<view class="info_value">
				<view class="i_top">
					<view class="i_left" style="font-weight: 550;font-size: 30rpx;">
						客户资料
					</view>
					<view class="i_right" @click="toeditcustomerinfo(customerinfo.id)">
						点击编辑
					</view>
				</view>
				<view class="title">
					请填写一下信息
				</view>
				<view class="v_common">
					<view class="v-left">
						客户姓名
					</view>
					<view class="v_right">
						{{customerinfo.customerName}}
					</view>
				</view>
				<view class="v_common">
					<view class="v-left">
					手机号码
					</view>
					<view class="v_right">
						{{customerinfo.phoneNum}}
						
					</view>
				</view>
				<view class="v_common">
					<view class="v-left">
						所属企业
					</view>
					<view class="v_right">
						{{customerinfo.company}}
					</view>
				</view>
				<view class="v_common">
					<view class="v-left">
						职位名称
					</view>
					<view class="v_right">
						{{customerinfo.jobTitle}}
					</view>
				</view>
				<view class="v_common">
					<view class="v-left">
						微信号
					</view>
					<view class="v_right">
						{{customerinfo.wechatId}}
					</view>
				</view>
				<view class="v_common">
					<view class="v-left">
						微信昵称
					</view>
					<view class="v_right">
					{{customerinfo.wechatName}}
					</view>
				</view>
				<view class="v_common">
					<view class="v-left">
						性别
					</view>
					<view class="v_right">
					{{customerinfo.sex}}
					</view>
				</view>
				<view class="v_common">
					<view class="v-left">
						邮箱
					</view>
					<view class="v_right">
						{{customerinfo.email}}
					</view>
				</view>
				<view class="v_common">
					<view class="v-left">
						生日
					</view>
					<view class="v_right">
						{{customerinfo.birthday}}
					</view>
				</view>
				<view class="v_common">
					<view class="v-left">
						地址信息
					</view>
					<view class="v_right">
						{{customerinfo.address}}
					</view>
				</view>
				<view class="v_common">
					<view class="v-left">
						客户描述
					</view>
					<view class="v_right">
						{{customerinfo.customerDescription}}
					</view>
				</view>
				
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customerinfo:{
					
				},
				tablist:[
					{name:'线索'},
					{name:'跟进'},
					{name:'标签'},
					{name:'订单'},
					{name:'资料'},
					{name:'奖品'},
					{name:'提醒'},
				],
				tabnum:0,
				intentions:[],
				isbargain:[],
				followlist:[],
				orderList:[],
				e:{},
				imgUrl: getApp().globalData.imgUrl,
					
				
			};
		},
		onLoad(e) {
			this.e=e
			// this.getintions()
			this.getcustomerinfo(e)
			
		},
		methods:{
			// 获取客户详情
			 getcustomerinfo(val){
				this.$request(
				{
					url:'v3/customer/front/appCustomer/'+val.id,
					method:'GET'
				}).then(res=>{
						this.customerinfo=res.data
						// 获取订单详情
						this.$request({
												 url:'v3/business/front/orderInfo/list',
												 method:"GET",
												 data:{
													 pageSize:100,
													 current:1,
													 time:0,
													 phoneNum:this.customerinfo.phoneNum
												 }
						}).then(res=>{
												 this.orderList=res.data.list
						})
						// this.customerinfo.followList.forEach(item=>{
						// 	item.customerIntention=this.changvalue(this.intentions,item.customerIntention)
						//   item.dealOrNot=this.changvalue(this.isbargain,item.dealOrNot)
						//    item.followStage=this.changvalue(this.followlist,item.followStage)
						// })
				})
			 
			},
			// 编辑客户资料
			toeditcustomerinfo(val){
				uni.navigateTo({
					url:"/standard/editcustomer/editcustomer?id="+val
				})
			},
			// tab切换
			changetab(val){
				this.tabnum=val
				 if(val==3){
					 // 获取订单详情
					 this.$request({
						 url:'v3/business/front/orderInfo/list',
						 method:"GET",
						 data:{
							 pageSize:100,
							 current:1,
							 time:0,
							 phoneNum:this.customerinfo.phoneNum
						 }
					 }).then(res=>{
						 this.orderList=res.data.list
					 })
				 }
			},
			// 删除跟进记录
			deletefn(val){
				let arr=[]
				arr.push(val.followId)
				this.$u.api.customer.deletfollowapi(arr).then(res=>{
					this.getcustomerinfo(this.e)
					this.tabnum=1
				})
			},
			 goShopHome(storeId) {
			 	if (storeId != 0) {
			 		this.showState = true
			 		this.$Router.push({
			 			path: '/standard/store/shopHomePage',
			 			query: {
			 				vid: storeId
			 			}
			 		})
			 	}
			 },
			//跳转订单详情页
			goOrderDetail(orderSn) {
				this.showState = true
				this.$Router.push({
					path: '/pages/order/detail',
					query: {
						orderSn
					}
				})
			},
			//查看物流
			lookLogistics(orderSn) {
				this.showState = true
				this.$Router.push({
					path: '/pages/order/lookLogistics',
					query: {
						orderSn
					}
				})
			},
			//修改地址
			editAddress(item) {
				this.showState = true
				let {
					receiverAddress,
					receiverAreaInfo,
					receiverMobile,
					orderSn
				} = item
				this.$Router.push({
					path: '/pages/address/list',
					query: {
						source: 2,
						orderSn,
						sourceOrderAddress: encodeURIComponent(`${receiverAddress},${receiverMobile}`)
					}
				})
			},
			// 确认收货
			confirmReceipt(type, orderSn) {
			
				switch (type) {
					case 'open': {
						this.selOrderSn = orderSn
						this.$refs.receivePopup.open()
						break;
					}
					case 'confirm': {
						this.$refs.receivePopup.close()
						let param = {}
						param.url = 'v3/business/front/orderOperate/receive'
						param.method = 'POST'
						param.data = {
							orderSn: this.selOrderSn
						}
						this.$request(param).then(res => {
							if (res.state == 200) {
								uni.showToast({
									title: this.$L('收货成功！'),
									icon: 'none',
									duration: 700
								})
								this.refreshOrderList();
								this.refreshOrder()
							} else {
								this.$api.msg(res.msg)
							}
						})
					}
				}
			},
			// 评价
			remainEvaluated(orderSn) {
				this.showState = true
				this.$Router.push({
					path: '/pages/order/publishEvaluation',
					query: {
						orderSn
					}
				})
			},
			//获取意向度/是否成交
			getintions(){
				this.$u.api.dictData({dictType:'instion'}).then(res=>{
					this.intentions=res.data
					
				})
				this.$u.api.dictData({dictType:'isbargain'}).then(res=>{
					this.isbargain=res.data
				})
				this.$u.api.dictData({dictType:'customer_fllow'}).then(res=>{
					this.followlist=res.data
				})
			},
			changvalue(arr,val){
				for(let i=0; i<arr.length;i++){
					if(arr[i].value==val){
						return arr[i].label
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
  .warp{
  	background-color: #f7f7f7;
  	color: #282828;
  	font-family: PingFang-SC-Regular;
  	.card_box{
  		padding: 30rpx;
  		background-color: #fff;
  		.card{
  			width: 690rpx;
  			height: 430rpx;
  			padding: 20rpx;
  			background-color: #faf2e5;
  			border: 2rpx solid #e6e3e3;
  			border-radius: 10rpx;
  			.info{
				padding: 10rpx;
  				display: flex;
  				.left{
  					margin-right: 10rpx;
  				}
  				.right{
  					.name{
  						font-size: 30rpx;
  					}
  					.status{
  						margin-top: 10rpx;
  						 display: flex;
  						.left_status{
  							height: 36rpx;
  							line-height: 34rpx;
  							padding: 0rpx 8rpx;
  							font-size: 24rpx;
  							background-color: #ffcf84;
  							color: #fff;
  							border-radius: 4rpx;
  						}
  						.right_status{
  							margin-left: 8rpx;
  							
  							height: 36rpx;
  							line-height: 34rpx;
  							padding: 0rpx 8rpx;
  							font-size: 24rpx;
  							 border: 2rpx solid #966120;
  							color: #966120;
  							border-radius: 4rpx;
  						}
  					}
  					.address,.phone{
  						color: #9a948d;
						font-size: 26rpx;
  					}
  					.source{
						margin-top: 10rpx;
  						.left_s{
  							width: 50%;
  							line-height: 23rpx;
  							padding: 8rpx;
  							font-size: 24rpx;
  							border: 2rpx solid #966120;
  							color: #966120;
  							border-radius: 24rpx;
  							text-align: center;
  							background-color: #fff;
  						}
  					}
  				}
  				
  			}
  			.bottom{
  				margin-top: 50rpx;
  				.b_list{
  					display: flex;
  					padding: 0 30rpx ;
  					justify-content: space-between;
  					.b_item{
  						text-align: center;
  						.b_top{
  							margin-bottom: 10rpx;
  							font-size: 36rpx;
  							font-weight: 550;
  							color: #3e3d3f;
  						}
  						.b_bottom{
  							font-size: 32rpx;
  							color: #bab2a7;
  						}
  					}
  				}
  			}
  		}
  	}
  	.tabs{
  		.tab_list{
  			
  			display: flex;
  			justify-content: space-between;
  			padding: 0 30rpx ;
  			background-color: #fff;
  			margin-top: 20rpx;
  			border-bottom: 2rpx solid #cecece;
  			.tab_item{
  				padding: 16rpx 0;
  				color: #646464;
  				font-size: 26rpx;
  			}
  			.tab_active{
  				padding: 16rpx 0;
  				color: #646464;
  				font-size: 30rpx;
  				border-bottom: 4rpx solid #ffb907;
  				color: #2d2d2d;
  				font-weight: 550;
  			}
  		}
  	}
  	.tab_value{
  		// 线索
  		.thread{
  			background-color: #fff;
  			.thread_list{
  				padding: 20rpx 30rpx;
  				.thread_item{
  					margin-bottom: 30rpx;
  					display: flex;
  					.t_lft{
  						display: flex;
  						flex-direction: column;
  						width: 30rpx;
  						align-items: center;
  						margin-right: 30rpx;
  						.scri{
  							width: 20rpx;
  							height: 20rpx;
  							background-color: #ffeab0;
  							border: 2rpx solid #e4c04c ;
  							border-radius: 50%;
  						}
  						.line{
  							width: 2rpx;
  							height: 100rpx;
  							background-color: #dfdfdf;
  							margin-top: 20rpx;
  						}
  					}
  					
  				}
  			}
  		}
  	}
  	// 跟进
  	.follow{
  		.follow_list{
  			background-color: #fff;
  			padding: 60rpx;
  			.follow_item{
  				margin-bottom: 20rpx;
  				padding: 30rpx;
  				background-color: #fffaf6;
  				position:relative;
  				.comm{
  					padding: 10rpx 0;
  				}
  				.icon{
  					position: absolute;
  					top: 20rpx;
  					right: 20rpx;
  				}
  			}
  		}
  	}
	.label_con {
		position: relative;
		left: 0;
	
		.act_label {
			height: 36rpx;
			border-radius: 15rpx;
			line-height: 36rpx;
			padding: 0 14rpx;
		}
	
		.preSale {
			// width: 38px;
			// height: 14px;
			background: linear-gradient(90deg, #EC0093 0%, #FF085B 100%);
			border-radius: 4rpx;
			color: #fff;
			font-size: 24rpx;
	
		}
	
		.pinGroup {
			background: linear-gradient(45deg, #FF6000 0%, #FF9C00 100%);
			border-radius: 4rpx;
			color: #fff;
			font-size: 24rpx;
		}
	
		.ladder {
			background: linear-gradient(22deg, #FE901E 0%, #FEAD28 100%);
			color: #fff;
			font-size: 24rpx;
			border-radius: 4rpx;
		}
	
		.seckill {
			background: linear-gradient(to right, #fc5300, #ff1353);
			color: #fff;
			font-size: 24rpx;
			border-radius: 4rpx;
		}
	}
	// order
	.order{
		
		.order-item {
			width: 100%;
			padding-left: 20rpx;
			background: #fff;
			margin-top: 20rpx;
		
			.i-top {
				display: flex;
				align-items: center;
				padding-right: 20rpx;
				position: relative;
				width: 100%;
				margin-top: 30rpx;
				border-bottom: 1rpx solid #f2f2f2;
				padding-bottom: 30rpx;
		
				.store_name {
					flex: 1;
					display: flex;
					align-items: center;
		
					image {
						width: 34rpx;
						height: 32rpx;
						transform: scale(0.9);
					}
		
					.store_name_text {
						font-size: 26rpx;
						color: #2d2d2d;
						font-weight: bold;
						margin-left: 10rpx;
					}
		
					.store_logo_right {
						width: 13rpx;
						height: 22rpx;
						margin-left: 10rpx;
					}
				}
		
				.state {
					font-size: 26rpx;
					color: var(--color_price);
				}
			}
		
			.goods-box {
				position: relative;
				padding: 20rpx 0;
				width: 100%;
				border-bottom: 1rpx solid #f2f2f2;
		
				.goods_return_status {
					position: absolute;
					bottom: 24rpx;
					right: 21rpx;
					font-size: 22rpx;
					color: var(--color_vice);
				}
		
				.left {
					.goods-img {
						background-size: cover;
						background-position: center center;
						background-repeat: no-repeat;
						width: 200rpx;
						height: 200rpx;
						overflow: hidden;
						background-color: #F8F6F7;
						border-radius: 14rpx;
						flex-shrink: 0;
					}
		
					.goods_info {
						margin-left: 25rpx;
						padding-top: 10rpx;
						height: 200rpx;
						width: 100%;
		
						.goods_name {
							color: #2D2D2D;
							font-size: 28rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							word-break: break-word;
							line-height: 38rpx;
						}
		
						.spec_info {
							color: #949494;
							font-size: 24rpx;
							line-height: 28rpx;
							background-color: #F8F8F8;
							padding: 3rpx 7rpx;
							border-radius: 6rpx;
							margin-top: 10rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
		
						.presale_deliver_time {
							padding: 0 6rpx;
							border: 2rpx solid var(--color_vice);
							font-size: 24rpx;
							color: var(--color_vice);
							position: absolute;
							left: 90rpx;
							white-space: nowrap;
						}
					}
				}
		
		
				.right {
					padding: 0 30rpx 0 24rpx;
					overflow: hidden;
					flex-shrink: 0;
		
					.price_info {
						color: $main-font-color;
						font-weight: bold;
						align-items: baseline;
		
						.unit,
						.price_decimal {
							font-size: 24rpx;
							line-height: 28rpx;
						}
		
						.price_int {
							font-size: 32rpx;
							line-height: 32rpx;
						}
					}
		
					.goods_num {
						color: #2D2D2D;
						font-size: 24rpx;
					}
		
					.goods_num_give {
						color: #2D2D2D;
						font-size: 28rpx;
						font-weight: bold;
					}
		
					.title {
						font-size: 24rpx;
						color: $font-color-dark;
						line-height: 1;
					}
		
					.attr-box {
						font-size: 22rpx;
						color: $font-color-light;
						padding: 10rpx 12rpx;
					}
				}
			}
		
			.price-box {
				display: flex;
				justify-content: flex-end;
				align-items: baseline;
				padding: 0 18rpx;
				font-size: 24rpx;
				color: #949494;
				width: 100%;
				margin-top: 30rpx;
				position: relative;
		
				.order_type {
					position: absolute;
					left: 0;
					top: 0;
					background: linear-gradient(22deg, #FE901E 0%, #FEAD28 100%);
					height: 36rpx;
					padding: 0 14rpx;
					color: #fff;
					border-radius: 18rpx;
					font-size: 22rpx;
				}
		
				.order_mount {
					color: #333333;
					font-size: 24rpx;
					margin-left: 20rpx;
				}
		
				.total_price {
					color: #2D2D2D;
					font-weight: bold;
					align-items: baseline;
					margin-left: 15rpx;
		
					.unit,
					.price_decimal {
						font-size: 24rpx;
					}
		
					.price_int {
						font-size: 32rpx;
						line-height: 32rpx;
						margin-left: 5rpx;
					}
				}
		
			}
		
		
		
			.action-box {
				display: flex;
				justify-content: flex-end;
				align-items: flex-start;
				height: 70rpx;
				position: relative;
				padding-right: 20rpx;
				width: 100%;
				padding-bottom: 20rpx;
				margin-top: 30rpx;
			}
		
			.action-btn {
				width: 125rpx;
				height: 50rpx;
				margin: 0;
				margin-left: 10rpx;
				padding: 0;
				text-align: center;
				line-height: 50rpx;
				font-size: 24rpx;
				color: $main-font-color;
				background: #fff;
				border-radius: 25rpx;
				border: 1rpx solid #eeeeee;
		
				&:after {
					border: none;
				}
		
				&.recom {
					color: #fff;
					background: var(--color_main);
					border: none;
				}
			}
		}
	}
	.info{
		background-color: #fff;
		.info_value{
			padding: 30rpx;
			.i_top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.i_right{
					padding: 10rpx;
					border: 2rpx solid #cecece;
					border-radius: 35rpx;
					font-size: 24rpx;
				}
			}
			.title{
				font-size: 24rpx;
				font-weight: 550;
				margin-top: 20rpx;
			}
			.v_common{
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #666666;
			}
		}
	}
  }
</style>
